/**
* 引擎配置
*/
<template>
  <div style="float:left; width:100%;min-width:1000px;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>引擎配置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单 -->
    <div style="margin-left:300px; margin-top:100px">
      <el-form label-width="350px" ref="form">
        <h3 style="margin-left:255px">强时效订单阈值设定</h3>
        <el-form-item label="时效阈值(/h)">
          <el-input-number
            :disabled="noChanging"
            :max="2"
            :min="1"
            label="时效阈值"
            style="width:150px"
            v-model="strongAgingHours"
          >
            <template slot="append">km</template>
          </el-input-number>
        </el-form-item>

        <el-form-item label="距离阈值(/km)">
          <el-input-number
            :disabled="noChanging"
            :max="5"
            :min="3"
            label="强弱时效半径"
            style="width:150px"
            v-model="strongAgingDistance"
          ></el-input-number>
        </el-form-item>

        <h3 style="margin-left:255px">中时效订单阈值设定</h3>
        <el-form-item label="时效阈值(/h)">
          <el-select
            :disabled="noChanging"
            placeholder="请选择时间"
            style="width:150px;"
            v-model="middleAgingHours"
          >
            <el-option
              :key="item.middleAgingHours"
              :label="item.label"
              :value="item.middleAgingHours"
              v-for="item in middleAgingHoursOptions"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="距离阈值(/km)">
          <el-input-number
            :disabled="noChanging"
            :max="15"
            :min="10"
            label="中时效阈值"
            style="width:150px"
            v-model="middleAgingDistance"
          ></el-input-number>
        </el-form-item>

        <h3 style="margin-left:255px">弱时效订单阈值设定</h3>
        <el-form-item label="时效阈值(/天)">
          <el-select
            :disabled="noChanging"
            placeholder="请选择天数"
            style="width:150px;"
            v-model="weaknessAgingHours"
          >
            <el-option
              :key="item.weaknessAgingHours"
              :label="item.label"
              :value="item.weaknessAgingHours"
              v-for="item in weaknessAgingHoursOptions"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="距离阈值(/km)">
          <el-input-number
            :disabled="noChanging"
            :max="25"
            :min="20"
            label="强弱时效阈值"
            style="width:150px"
            v-model="weaknessAgingDistance"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <div style="display:inline; float:left; margin-top:30px;">
        <el-button
          :disabled="isUsingChangeButtuon"
          @click="beginChangeSettings"
          style="margin-left:160px; float:left;"
          type="primary"
        >修改配置
        </el-button>
        <el-button
          :disabled="noChanging"
          @click="submitChangedSettings"
          style="margin-left:60px; float:left;"
          type="primary"
        >提交修改
        </el-button>
        <el-button
          :disabled="noChanging"
          @click="cancelChange"
          style="margin-left:60px; float:left;"
          type="primary"
        >放弃修改
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
    import {roleList, roleSave} from "../../api/userMG";

    export default {
        //这里进行网络请求获取，获取默认参数
        /*
        //需要注意的是,后台传过来的都是string，除了middleAgingHours,weaknessAgingHours 外的4个参数都要做toInt转化
        //注意点2:传过来的距离参数（3个），都是m为单位，而我们这里是km,所以接收的时候需要将距离参数除以1000再接收， 同时传给后台的时候需要乘以1000后，toString转化后再上传
        //注意点3:获取完参数后，使用this.storeChangedDefaultData()函数，更新本地保存数据
        */
        /*
      //利用watch检测变化数据，想法很美好，现实却不一样
        watch: {
          strongAgingHours(val,newval){
            if(val!==this.storedStrongAgingHours){
              this.isPropChanged=true
            }
          },
        },
      */
        data() {
            return {
                isPropChanged: false, //验证重复输入提交
                noChanging: true, //并未点击修改按钮，没有开始进行设置，表单无法使用
                isUsingChangeButtuon: false, //没有在使用设置按钮
                strongAgingHours: 1, //默认强时效时间：1h
                strongAgingDistance: 5, //默认强时效半径 5km
                middleAgingHours: "24", //默认中时效时间:24h
                middleAgingDistance: 10, //默认中时效半径,10km
                weaknessAgingHours: "120", //默认弱时效阈值 5天,120h
                weaknessAgingDistance: 20, //默认弱时效距离 20km

                storedStrongAgingHours: 1, //存储默认强时效时间：1h
                storedStrongAgingDistance: 5, //存储默认强时效半径 5km
                storedMiddleAgingHours: "24", //存储默认中时效时间:24h
                storedMiddleAgingDistance: 10, //存储默认中时效半径,10km
                storedWeaknessAgingHours: "120", //存储默认弱时效阈值 5天,120h
                storedWeaknessAgingDistance: 20, //存储默认弱时效距离 20km

                middleAgingHoursOptions: [
                    {
                        middleAgingHours: "24",
                        label: "24"
                    },
                    {
                        middleAgingHours: "48",
                        label: "48"
                    }
                ],

                weaknessAgingHoursOptions: [
                    {
                        weaknessAgingHours: "72",
                        label: "3"
                    },
                    {
                        weaknessAgingHours: "120",
                        label: "5"
                    }
                ]
            };
        },
        created() {
            roleList().then(res => {
                console.log(res.data[0].value);
                //this.engineList=res.data;
                this.strongAgingHours = res.data[0].value;
                this.strongAgingDistance = res.data[1].value / 1000;
                this.weaknessAgingHours = res.data[2].value;
                this.weaknessAgingDistance = res.data[3].value / 1000;
                this.middleAgingHours = res.data[4].value;
                this.middleAgingDistance = res.data[5].value / 1000;
                this.storedStrongAgingHours = res.data[0].value;
                this.storedStrongAgingDistance = res.data[1].value / 1000;
                this.storedWeaknessAgingHours = res.data[2].value;
                this.storedWeaknessAgingDistance = res.data[3].value / 1000;
                this.storedMiddleAgingHours = res.data[4].value;
                this.storedMiddleAgingDistance = res.data[5].value / 1000;
                console.log("强时间" + this.strongAgingHours);
                console.log("强距离" + this.strongAgingDistance);
                console.log("弱时间" + this.weaknessAgingHours);
                console.log("弱距离" + this.weaknessAgingDistance);
                console.log("中时间" + this.middleAgingHours);
                console.log("中距离" + this.middleAgingDistance);
                console.log("强时间存储" + this.storedStrongAgingHours);
                console.log("强距离存储" + this.storedStrongAgingDistance);
                console.log("弱时间存储" + this.storedWeaknessAgingHours);
                console.log("弱距离存储" + this.storedWeaknessAgingDistance);
                console.log("中时间存储" + this.storedMiddleAgingHours);
                console.log("中距离存储" + this.storedMiddleAgingDistance);
                //this.storeChangedDefaultData();
            })
        },
        methods: {
            //替换本地数据，用于在放弃修改的时候进行数据替换
            replaceDefalutVlaue() {
                this.strongAgingHours = this.storedStrongAgingHours;
                this.strongAgingDistance = this.storedStrongAgingDistance;
                this.middleAgingHours = this.storedMiddleAgingHours;
                this.middleAgingDistance = this.storedMiddleAgingDistance;
                this.weaknessAgingHours = this.storedWeaknessAgingHours;
                this.weaknessAgingDistance = this.storedWeaknessAgingDistance;
            },
            //提交成功的时候保存本地数据
            storeChangedDefaultData() {
                this.storedStrongAgingHours = this.strongAgingHours;
                this.storedStrongAgingDistance = this.strongAgingDistance;
                this.storedMiddleAgingHours = this.middleAgingHours;
                this.storedMiddleAgingDistance = this.middleAgingDistance;
                this.storedWeaknessAgingHours = this.weaknessAgingHours;
                this.storedWeaknessAgingDistance = this.weaknessAgingDistance;
            },

            judgeValuesSame() {
                if (this.strongAgingHours !== this.storedStrongAgingHours) {
                    this.isPropChanged = true;
                } else if (this.strongAgingDistance !== this.storedStrongAgingDistance) {
                    this.isPropChanged = true;
                } else if (this.storedMiddleAgingHours !== this.middleAgingHours) {
                    this.isPropChanged = true;
                } else if (this.storedMiddleAgingDistance !== this.middleAgingDistance) {
                    this.isPropChanged = true;
                } else if (this.storedWeaknessAgingHours !== this.weaknessAgingHours) {
                    this.isPropChanged = true;
                } else if (
                    this.storedWeaknessAgingDistance !== this.weaknessAgingDistance
                ) {
                    this.isPropChanged = true;
                } else {
                    this.isPropChanged = false;
                }
            },
            //点击后，所有表单内容都可以进行修改
            beginChangeSettings() {
                this.noChanging = false;
                this.isUsingChangeButtuon = true;
            },
            submitChangedSettings() {
                this.judgeValuesSame();
                this.makesureCommit();
            },
            cancelChange() {
                this.giveUpChange();
            },
            giveUpChange() {
                this.$confirm("是否要放弃修改设置?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "不了",
                    type: "warning"
                })
                    .then(() => {
                        this.replaceDefalutVlaue();
                        this.noChanging = true;
                        this.isUsingChangeButtuon = false;
                    })
                    .catch(() => {
                        console.log("取消放弃修改");
                    });
            },
            makesureCommit() {
                this.$confirm("是否要提交修改?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "不了",
                    type: "warning"
                })
                    .then(() => {
                        if (this.isPropChanged) {
                            var EngineConfigs = [{
                                id: 1,
                                value: this.strongAgingHours
                            },
                                {
                                    id: 2,
                                    value: this.strongAgingDistance * 1000
                                },
                                {
                                    id: 5,
                                    value: this.middleAgingHours
                                },
                                {
                                    id: 6, value: this.middleAgingDistance * 1000
                                },
                                {
                                    id: 3,
                                    value: this.weaknessAgingHours
                                },
                                {
                                    id: 4,
                                    value: this.weaknessAgingDistance * 1000
                                },
                            ];
                            console.log("强距离" + this.strongAgingDistance);
                            console.log("弱时间" + this.weaknessAgingHours);
                            console.log("弱距离" + this.weaknessAgingDistance);
                            console.log("中时间" + this.middleAgingHours);
                            console.log("中距离" + this.middleAgingDistance);
                            console.log("强时间存储" + this.storedStrongAgingHours);
                            console.log("强距离存储" + this.storedStrongAgingDistance);
                            console.log("弱时间存储" + this.storedWeaknessAgingHours);
                            console.log("弱距离存储" + this.storedWeaknessAgingDistance);
                            console.log("中时间存储" + this.storedMiddleAgingHours);
                            console.log("中距离存储" + this.storedMiddleAgingDistance);
                            roleSave(JSON.stringify(EngineConfigs)).then(res => {
                                if (res.status != 0) {
                                    this.$message.error("修改设置失败");
                                } else {
                                    this.storeChangedDefaultData(); //存储提交的设置数据
                                    console.log("强时间" + this.strongAgingHours);
                                    console.log("强距离" + this.strongAgingDistance);
                                    console.log("弱时间" + this.weaknessAgingHours);
                                    console.log("弱距离" + this.weaknessAgingDistance);
                                    console.log("中时间" + this.middleAgingHours);
                                    console.log("中距离" + this.middleAgingDistance);
                                    console.log("强时间存储" + this.storedStrongAgingHours);
                                    console.log("强距离存储" + this.storedStrongAgingDistance);
                                    console.log("弱时间存储" + this.storedWeaknessAgingHours);
                                    console.log("弱距离存储" + this.storedWeaknessAgingDistance);
                                    console.log("中时间存储" + this.storedMiddleAgingHours);
                                    console.log("中距离存储" + this.storedMiddleAgingDistance);
                                    this.noChanging = true;
                                    this.isUsingChangeButtuon = false;
                                    this.isPropChanged = false;
                                    this.$message({
                                        message: "提交成功",
                                        type: "success"
                                    });
                                }
                            }),
                                console.log("存储" + this.storedStrongAgingHours);
                            console.log("原本" + this.strongAgingHours);
                            //这里进行提交的网络请求，获取是否提交成功的信息
                        } else {
                            this.$message.error("您没有进行任何修改");
                        }
                    })
                    .catch(() => {
                        console.log("放弃提交");
                    });
            }
        }
    };
</script>

<style scoped>
</style>

